<template>
    <div class="bg_friend">
        <div v-for="item in props.friendDetail" :key="item.id" class="user_con">
            <img class="user_avator" src="/static/user.png" alt="" />
            <div class="friend_main">
                <div class="user_name">{{ item.user_name || '张三' }}</div>
                <!--欢迎语-->
                <!-- <template v-if="item.type == 1">
          <div class="welcomeWords">{{item.content}}</div>
        </template> -->
                <template v-if="item.type == 0">
                    <div class="welcomeWords">{{ item.content }}</div>
                </template>
                <!-- 图片 -->
                <template v-if="item.type == 1">
                    <el-image class="send_image" :src="item.absolute_url" alt="" fit="cover">
                        <template #error>
                            <el-image class="send_image" src="/static/file/pic.png" alt=""></el-image>
                        </template>
                    </el-image>
                </template>

                <!-- 视频 -->
                <template v-else-if="item.type == 2">
                    <div class="video_list">
                        <el-image class="video_image" :src="item.thumbnail_url" alt="" fit="cover">
                            <template #error>
                                <el-image class="video_image" src="/static/file/mov.png" alt=""></el-image>
                            </template>
                        </el-image>
                        <el-image class="video_play" src="/static/play.png" alt="" fit="cover"></el-image>
                    </div>
                </template>
                <!-- 链接 -->
                <template v-if="item.type == 3">
                    <div class="user_link">
                        <div class="user_link_tit">{{ item.title }}</div>
                        <div class="user_link_main">
                            <div class="user_link_desc"></div>
                            <el-image :src="item.cover_image_url" alt="" class="user_link_icon" fit="cover">
                                <template #error>
                                    <el-image class="user_link_icon" src="/static/file/link.png" alt=""></el-image>
                                </template>
                            </el-image>
                        </div>
                    </div>
                </template>
                <!-- 音频 -->
                <template v-else-if="item.type == 4">
                    <div class="user_file">
                        <div class="user_file_main">
                            <div class="user_file_desc">{{ item.title }}</div>
                            <el-image :src="item.cover_image_url" alt="" class="user_file_icon" fit="cover"></el-image>
                        </div>
                        <div class="user_file_size">
                            {{ item.file_size ? (item.file_size / 1024 / 1024).toFixed(2) + ' M' : '' }}
                        </div>
                    </div>
                </template>
                <!-- 文件 -->
                <template v-else-if="item.type == 5">
                    <div class="user_file">
                        <div class="user_file_main">
                            <div class="user_file_desc">{{ item.name }}</div>
                            <el-image
                                :src="getSuffixIcon(item.name)"
                                alt=""
                                class="user_file_icon"
                                fit="cover"></el-image>
                        </div>
                    </div>
                </template>
                <!-- 抽奖 -->
                <template v-if="item.type == 6">
                    <div class="user_link">
                        <div class="user_link_tit">{{ item.title }}</div>
                        <div class="user_link_main">
                            <div class="user_link_desc"></div>
                            <el-image :src="item.cover_image_url" alt="" class="user_link_icon" fit="cover">
                                <template #error>
                                    <el-image class="user_link_icon" src="/static/file/wbgg.png" alt=""></el-image>
                                </template>
                            </el-image>
                        </div>
                    </div>
                </template>
                <template v-else-if="item.type == 7 || item.type == 8">
                    <div class="user_link collection_link">
                        <div class="user_link_tit">{{ item.name }}</div>
                        <div class="user_link_main">
                            <div class="user_link_desc desc_url">{{ item.desc }}</div>
                            <el-image :src="item.cur_icon" alt="" class="user_link_icon" fit="contain">
                                <template #error>
                                    <el-image class="user_link_icon" src="/static/file/shop.png" alt=""></el-image>
                                </template>
                            </el-image>
                        </div>
                    </div>
                </template>
                <!-- 收集表 -->
                <template v-else-if="item.type == 9">
                    <div class="user_link collection_link">
                        <div class="user_link_tit">{{ item.name }}</div>
                        <div class="user_link_main">
                            <div class="user_link_desc desc_url">{{ item.desc }}</div>
                            <el-image :src="item.cur_icon" alt="" class="user_link_icon" fit="contain">
                                <template #error>
                                    <el-image class="user_link_icon" src="/static/file/form.png" alt=""></el-image>
                                </template>
                            </el-image>
                        </div>
                    </div>
                </template>
                <template v-else-if="item.type == 10">
                    <div class="user_file">
                        <div class="user_file_main">
                            <div class="user_file_desc">{{ item.name }}</div>
                            <el-image
                                :src="item.cover_image_url"
                                alt=""
                                class="user_file_icon"
                                fit="contain"></el-image>
                        </div>
                    </div>
                </template>
                <!-- 小程序素材 -->
                <template v-else-if="item.type == 11">
                    <div class="miniApp">
                        <div class="mini_box">
                            <img class="mini_icon" src="@/assets/chatDetails/Appletbg.png" alt="" />
                            <div class="miniName">{{ item.title }}</div>
                        </div>
                        <div class="mini_bg">
                            <el-image
                                :src="item?.image_url || item.cover_image_url"
                                alt=""
                                class="miniImg"
                                fit="contain">
                                <template #error>
                                    <div class="image-slot">
                                        <img :src="item.cur_icon" alt="" />
                                    </div>
                                </template>
                            </el-image>
                        </div>
                        <div class="mini_bot">
                            <img src="@/assets/chatDetails/Applet.png" alt="" />
                            <span>小程序</span>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';

import { DFormat, getSuffixIcon } from '@/utils/utils';
const props = defineProps(['friendDetail']);

const list = reactive([]);
</script>

<style scoped lang="scss">
$num: 2;

@mixin ellips($num) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $num;
    line-clamp: $num;
    -webkit-box-orient: vertical;
}

.bg_friend {
    // width: 100%;

    .public_title {
        font-size: 11px;
        text-align: center;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #33302d;
    }

    .public_time {
        margin-top: 7px;
        text-align: center;
        font-size: 11px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #969696;
    }

    .user_con {
        margin-top: 10px;
        display: flex;

        .user_avator {
            width: 22px;
            height: 22px;
            margin-right: 4px;
        }

        .friend_main {
            flex: 1;

            .user_name {
                font-size: 12px;
                font-family: STHeitiSC-Medium, STHeitiSC;
                font-weight: 500;
                color: #969696;
                transform: scale(0.6);
                transform-origin: left top;
                margin-bottom: 4px;
            }

            .welcomeWords {
                position: relative;
                margin-left: 5px;
                font-size: 12px;
                color: #969696;
                line-height: 15px;
                transform: scale(0.6);
                transform-origin: left top;
                width: 160px;
                box-sizing: border-box;
                word-break: break-all;
                height: 67px;
                overflow: hidden;
                padding: 5px 10px;
                background-color: #fff;
                border-radius: 5px;

                @include ellips(4);

                &::after {
                    content: '';
                    position: absolute;
                    left: -5px;
                    top: 10px;
                    width: 0;
                    height: 0;
                    border-top: 5px solid transparent;
                    border-right: 8px solid #fff;
                    border-bottom: 5px solid transparent;
                }
            }

            .send_image {
                width: 68px;
                height: 68px;
            }

            .video_list {
                position: relative;
                width: 80px;
                height: 55px;

                .video_image {
                    width: 100%;
                    height: 100%;
                }

                .video_play {
                    width: 15px;
                    height: 15px;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                }
            }

            .user_link {
                margin-left: 5px;
                position: relative;
                width: 151px;
                height: 65px;
                box-sizing: border-box;
                padding: 5px 10px;
                border-radius: 5px;
                background: #fff;

                &::after {
                    content: '';
                    position: absolute;
                    left: -5px;
                    top: 10px;
                    width: 0;
                    height: 0;
                    border-top: 5px solid transparent;
                    border-right: 8px solid #fff;
                    border-bottom: 5px solid transparent;
                }

                .user_link_tit {
                    width: 100%;
                    font-size: 12px;
                    font-family: STHeitiSC-Light, STHeitiSC;
                    font-weight: 300;
                    color: #000;
                    transform: scale(0.83);
                    transform-origin: left top;

                    @include ellips(2);
                }

                .user_link_main {
                    margin-top: 4px;
                    display: flex;

                    .user_link_desc {
                        width: 110px;
                        font-size: 12px;
                        font-family: STHeitiSC-Light, STHeitiSC;
                        font-weight: 300;
                        color: #969696;
                        transform: scale(0.6);
                        transform-origin: left top;
                        margin-top: 2px;

                        @include ellips(3);
                    }

                    .user_link_icon {
                        width: 22px;
                        height: 22px;
                    }
                }
            }

            .user_file {
                position: relative;
                margin-left: 5px;
                width: 150px;
                height: 48px;
                box-sizing: border-box;
                padding: 8px;
                border-radius: 3px;
                background: #fff;

                &::after {
                    content: '';
                    position: absolute;
                    left: -5px;
                    top: 6px;
                    width: 0;
                    height: 0;
                    border-top: 5px solid transparent;
                    border-right: 10px solid #fff;
                    border-bottom: 5px solid transparent;
                }

                .user_file_main {
                    display: flex;

                    .user_file_desc {
                        display: inline-block;
                        width: 100px;
                        overflow: hidden;
                        white-space: normal;
                        text-overflow: ellipsis;
                        font-size: 12px;
                        transform: scale(0.83);
                        transform-origin: left top;
                        margin-bottom: 2px;
                        font-family: STHeitiSC-Light, STHeitiSC;
                        font-weight: 300;
                        color: #000;

                        // @include ellips(2);
                    }

                    .user_file_icon {
                        width: 30px;
                        height: 30px;
                    }
                }

                .user_file_size {
                    // margin-top: 2px;
                    font-family: STHeitiSC-Light, STHeitiSC;
                    font-weight: 300;
                    color: #969696;
                    font-size: 12px;
                    transform: scale(0.6);
                    transform-origin: left top;
                }
            }
        }
    }
}

.miniApp {
    width: 150px;
    height: 164px;
    background: #fff;
    padding: 10px 5px;
    box-sizing: border-box;

    .mini_box {
        display: flex;
        align-items: center;
        margin-bottom: 7px;

        .mini_icon {
            width: 13px;
            height: 13px;
            margin-right: 4px;
        }
    }

    .miniName {
        line-height: 12px;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mini_bg {
        text-align: center;
        height: 106px;
        padding-bottom: 5px;
        border-bottom: 1px solid #eaeaea;
    }

    .mini_bot {
        line-height: 18px;

        img {
            width: 8px;
            height: 7px;
        }

        span {
            display: inline-block;
            font-size: 12px;
            transform: scale(0.68);
        }
    }

    .miniImg {
        width: 100%;
        height: 106px;
        margin: 0 auto;
    }
}
</style>
